<script setup>

/**
 * 添加书籍弹窗
 * addBookDialog
 * @dialogVisible(v-model= “”) 是否显示弹窗
 * @Book(@addBook="“) 是返回添加书籍
 */
import {ref} from "vue";

let dialogVisible = defineModel({type: Boolean, default: false});
const Book = defineEmits(["addBook"]);

const form = ref({
  bookName: '',
  author: '',
  publisher: ''
});

const addBook = () => {
  Book("addBook", form)
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="新增图书" width="300px">
    <el-form :model="form" label-position="right" label-width="100px">
      <el-form-item label="书名">
        <el-input v-model="form.bookName"/>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="form.author"/>
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="form.publisher"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addBook">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>